<template>
    <div id="app" style="height: 400px;" >
        <el-tabs type="border-card" style="width: 500px;height: 350px">
            <el-tab-pane label="登录">

                <el-form :model="formData"
                         ref="formData"
                         :rules="rules"
                         label-width="100px"
                         style="width: 90%;margin-top: 20px">
                    <el-form-item label="用户名" prop="name" :rules="[
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                    ]" >
                        <el-input  v-mode="formData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" >
                        <el-input type="password" v-mode="formData.password"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="submit(formData)">登录</el-button>
                        <el-button  @click="reset(formData)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="注册">
                <el-form :model="formData2"
                         ref="formData2"
                         label-width="100px"
                         :rules="rules2"
                         style="width: 90%;margin-top: 20px">
                    <el-form-item label="账号"   prop="number">
                        <el-input placeholder="请输入你的电话号码/邮箱" v-mode="formData2.number"></el-input>
                    </el-form-item>
                    <el-form-item label="设置密码" prop="password" >
                        <el-input type="password" v-mode="formData2.password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-mode="formData2.checkPass"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="submit(formData2)">注册</el-button>
                        <el-button  @click="reset(formData2)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
    import axios from 'axios'
    import qs from 'qs'

    export default {
        name: "Login",
        data (){

            return {
                formData:{
                    name: '',
                    password: ''
                },
                formData2:{
                    name: '',
                    password: '',
                    checkPass: ''
                },
                rules: {
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                    ],
                },
                rules2:{

                }
            }
        },
    methods: {
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        reset(formName) {
            this.$refs[formName].resetFields();
        }
    }

    }
</script>

<style scoped>
</style>